<template>
  <div>
    <el-tag
      :key="index"
      v-for="(item, index) in nextUser"
      closable
      :disable-transitions="false"
      @close="handleClose('next', item)"
    >
      {{ item.nickName }}
    </el-tag>
    <el-button
      class="button-new-tag"
      type="primary"
      icon="el-icon-plus"
      size="mini"
      circle
      @click="onSelectNextUsers"
    />
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <!--部门数据-->
        <el-col :span="5">
          <el-card shadow="never" style="height: 100%">
            <div slot="header">
              <span>部门列表</span>
            </div>
            <div class="head-container">
              <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
              <el-tree
                :data="deptOptions"
                :props="deptProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-table
            ref="userTable"
            height="500"
            v-loading="userLoading"
            :data="userList"
            highlight-current-row
            @current-change="changeCurrentUser"
            @selection-change="handleSelectionChange"
          >
            <el-table-column width="55" type="selection" />
            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="手机" align="center" prop="phonenumber" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getListUser"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectUser, deptTreeSelect, userSelect } from "@/api/system/user";

export default {
  props: {
    value: [String, Object, Array],
    placeholder: {
      type: String,
      default: "请检索员工",
    },
  },
  data() {
    return {
      deptProps: {
        children: "children",
        label: "label",
      },
      open: false,
      title: "人员检索",
      deptOptions: [],
      nextUser: [],
      userLoading: false,
      queryParams1: {
        deptId: undefined,
      },
      userMultipleSelection: [],
      // 部门名称
      deptName: undefined,
      userList: [],
      currentRow: {
        nickName: "",
      },
      total: "",
    };
  },
  watch: {
    value: {
      handler(val) {
        console.log("11");
      },
      deep: true,
      immediate: true,
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.userSelect();
  },
  methods: {
    handleClose(type, tag) {
      let userObj = this.userMultipleSelection.find(
        (item) => item.userId === tag.userId
      );
      console.log(userObj);
      this.userMultipleSelection.splice(
        this.userMultipleSelection.indexOf(userObj),
        1
      );
      this.nextUser = this.userMultipleSelection;
      this.$emit("change", this.userMultipleSelection);
      let userIds = this.userMultipleSelection.map((k) => k.userId);
      this.$emit("input", userIds);
    },
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    onSelectNextUsers() {
      this.onSelectUsers("人员");
    },
    onSelectUsers(title) {
      this.getTreeSelect();
      this.getListUser();
      this.open = true;
      console.log(this.open);
    },
    userSelect() {
      userSelect().then((response) => {
        this.userList = response.data;
        if (this.value && this.userList.length) {
          let n = this.userList.filter((e) => this.value.includes(e.userId));
          this.nextUser = n;
          this.userMultipleSelection = n;
        }
      });
    },
    /** 查询用户列表 */
    getListUser() {
      this.userLoading = true;
      selectUser(this.queryParams1).then((response) => {
        this.userLoading = false;
        this.userList = response.rows;
        this.total = response.total;
        if (this.value && this.userList.length) {
          // this.$emit("change", this.nextUser);
          // let n = this.userList.filter((e) => this.value.includes(e.userId));
          // this.nextUser = n;
          console.log(this.nextUser);
          this.toggleSelection(this.nextUser);
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams1.deptId = data.id;
      this.onSelectUsers();
    },
    changeCurrentUser(val) {
      console.log(val);
      this.currentUserId = val.userId;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userMultipleSelection = selection;
    },
    toggleSelection(selection) {
      if (selection) {
        this.$nextTick(() => {
          selection.forEach((item) => {
            let row = this.userList.find((k) => k.userId === item.userId);
            this.$refs.userTable.toggleRowSelection(row);
          });
        });
        // this.$nextTick(() => {
        //   selection.forEach((item) => {
        //     this.$refs.userTable.toggleRowSelection(item);
        //   });
        // });
      } else {
        this.$nextTick(() => {
          // this.$refs.userTable.clearSelection();
        });
      }
    },
    submitUserData() {
      if (
        !this.userMultipleSelection ||
        this.userMultipleSelection.length <= 0
      ) {
        this.$modal.msgError("请选择用户");
        return false;
      }
      this.$emit("change", this.userMultipleSelection);
      this.nextUser = this.userMultipleSelection;
      let userIds = this.userMultipleSelection.map((k) => k.userId);
      console.log(userIds);
      this.$emit("input", userIds);
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  cursor: pointer;
}
.button-new-tag {
  margin-left: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
